// 多图片上传组件 by zoomze
/** 
 prop: {
   maxLength: Number || 1, //上传数量限制
   saveFileList: [url, url, ...], // 初始图片列表(相对路径)
   type: 'default', //上传图片的类型 default 默认(span=8) idcard 身份证(span=24)
 }
 event: {
    uploaded(file, fileList) {}, //上传完成事件
    deleted(fileList) {} // 删除内容事件
  }
*/
const app = getApp()
Component({
  observers: {
    'saveFileList' (newValue) {
      let self = this
      // 校验是否已有保存的图片数据, 有则循环构建适当的数据
      if (this.data.saveFileList && this.data.saveFileList.length > 0) {
        this.data.fileList = []
        this.data.saveFileList.forEach(item => {
          this.data.fileList.push({
            url: item,
            showUrl: app.globalData.basePath + item, // 回显数据使用的url
          })
        })
      } else if (newValue.length == 0){
        this.data.fileList = []
      }
      this.setData({
        updated: false,
        fileList: this.data.fileList
      })
      wx.nextTick(_ => {
        this.setData({
          updated: true
        })
      })
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {
    maxLength: { // 限制最多的上传数量
      type: Number,
      value: 1,
    },
    saveFileList: { // 以保存的文件列表
      type: Array,
      value: [],
    },
    type: { // 上传类型
      type: String,
      value: 'default', //默认default 传身份证idcard
    },
    direction: { //朝向, 决定身份证上传正反面的背景图 
      type: String,
      value: 'forward' //forward 正面 back 背面
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    file: null,
    fileList: [], //已有的数据
    updated: true, // 每次上传后， 刷新一下
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 选择图片进行上传 可以分次上传 总共不超过this.data.maxLength的张数 
     */
    chooseUpload() {
      let self = this
      
      wx.chooseImage({
        count: self.data.maxLength - self.data.fileList.length, // 区分多次上传
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success(choosed) {
          // 选择图片完成后进行上传
          wx.showLoading({
            title: '上传中...',
            mask: true,
          })
          // 开始上传 多张图片重复调用
          self.upload(choosed.tempFilePaths, 0) // 从第一个开始循环, 重复调用直到结束
        }
      })
    },
    /** 
     * 上传方法 异步 但需要同步的方式调用
     */
    upload(choosedPaths, index) {
      let self = this
      if (index <= choosedPaths.length - 1) {
        wx.uploadFile({
          url: app.globalData.basePath + '/manage/housing_information/image',
          filePath: choosedPaths[index],
          name: 'img',
          success(res) {
            // 上传完成后 检查图片长度 等于长度后禁用上传功能
            // let fileUrl = JSON.parse(res.data).data.substring(app.globalData.basePath.length) // 减掉域名信息
            // 放入列表数据 
            self.data.fileList.push({
              url: JSON.parse(res.data).data,
              showUrl: choosedPaths[index], // 为保证图片快速显示 , 使用此url
            })
            // 继续调用上传方法
            self.setData({
              updated: false,
              fileList: self.data.fileList,
            })
            // 为避免上传按钮移位 在加载完成后需要将按钮放在最后一位 需要重新渲染上传按钮
            wx.nextTick(() => {
              self.setData({
                updated: true
              })
              console.log(self.data.type == 'idcard' && self.data.fileList.length != self.data.maxLength && self.data.updated)
            })
            self.upload(choosedPaths, ++index)
          },
          fail(err) {
            wx.hideLoading()
            wx.showModal({
              title: '提示',
              content: '图片上传失败， 请重试',
              showCancel: false
            })
          }
        })
      } else { // 上传到最后一张了 不再继续上传
        let array = JSON.parse(JSON.stringify(self.data.fileList))
        wx.nextTick(() => {
          self.triggerEvent('uploaded', { fileList: array })
          wx.hideLoading()
        })
      }
    },
    /**
     * 显示上拉菜单 根据选择的内容进行操作
     */
    showControl (options) {
      let self = this
      wx.showActionSheet({
        itemList: ['查看大图', '删除'],
        success(res) {
          // 重组图片list 用于预览显示
          let imgUrls = self.data.fileList.map(item => {
            return item.showUrl
          })
          if(res.tapIndex == 0) { // 查看大图
            wx.previewImage({
              urls: imgUrls,
              current: imgUrls[options.currentTarget.dataset.index]
            })
          }
          if (res.tapIndex == 1) { // 删除图片 提示删除modal
            wx.showModal({
              title: '提示',
              content: '删除后需要重新上传',
              success (success) {
                if (success.confirm) {
                  self.data.fileList.splice(options.currentTarget.dataset.index, 1)
                  self.setData({
                    fileList: self.data.fileList
                  })
                  self.triggerEvent('deleted', { fileList: self.data.fileList })
                }
              }
            })
          } 
        },
        fail(res) {
          console.log(res.errMsg)
        }
      })
    },
  }
})